<template>
  <div class="extraction-container">
    <template v-for="(mark,index) in markList">
      <div class="extraction-item" :key="index">
        <el-form label-width="50px">
          <el-switch v-model="mark.isAllowed" active-text="使用" inactive-text="禁用" active-color="#13ce66" inactive-color="#ff4949" @change="(data)=>handleSwitchChange(data,mark)"></el-switch>
          <p class="displayType">{{mark.displayType}}</p>
          <fieldset class="object-container">
            <legend>对象</legend>
            <el-row>
              <el-col :span="12">
                <el-form-item label="标签">
                  <el-input v-model="mark.displayName" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="类型">
                  <el-popover placement="bottom" trigger="manual" v-model="mark.popoverVisible">
                    <el-tree class="custom-node-tree" :data="groupTree" :default-expand-all="true" :expand-on-click-node="false" @node-click="(data,node)=>handleNodeClick(mark,data,node)">
                      <span class="custom-tree-node" slot-scope="{node,data}">
                        <img :src="data.icon" alt="" style="width:16px;height:16px;">
                        <span>{{ node.label }}</span>
                      </span>
                    </el-tree>
                    <el-input slot="reference" class="pointer" placeholder="选择对象类型" suffix-icon="el-icon-arrow-down" readonly v-model="mark.objectName" @click.native="mark.popoverVisible = !mark.popoverVisible"></el-input>
                  </el-popover>
                </el-form-item>
              </el-col>
            </el-row>
          </fieldset>
          <fieldset class="property-container">
            <legend>属性</legend>
            <template v-for="(property,index) in mark.propertyList">
              <el-row :key="index">
                <el-col :span="12">
                  <el-form-item label="类型" required>
                    <el-input v-model="property.displayname" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="值" required>
                    <template v-if="property.propertyType==='TimeInterval'">
                      <el-date-picker type="datetime" v-model="property.value.startTime" value-format="yyyy-MM-dd HH:mm:ss" style="width:48%" placeholder="开始日期">
                      </el-date-picker>
                      <el-date-picker type="datetime" v-model="property.value.endTime" value-format="yyyy-MM-dd HH:mm:ss" style="width:48%" placeholder="结束日期">
                      </el-date-picker>
                    </template>
                    <template v-else-if="property.propertyType==='GisData'">
                      <el-input v-model="property.value.longitude" placeholder="经度" style="width:30%"></el-input>
                      <el-input v-model="property.value.latitude" placeholder="纬度" style="width:30%"></el-input>
                      <el-input v-model="property.value.address" placeholder="位置描述" style="width:30%"></el-input>
                    </template>
                    <template v-else-if="property.propertyType==='DataTime'">
                      <el-date-picker type="datetime" v-model="property.value" value-format="yyyy-MM-dd HH:mm:ss" style="width:60%" :placeholder="representative.displayname">
                      </el-date-picker>
                    </template>
                    <template v-else>
                      <el-input v-model="property.value" :placeholder="property.displayname"></el-input>
                    </template>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
          </fieldset>
        </el-form>
      </div>
    </template>
  </div>
</template>

<script>
import util from '@/utils'
import { postHanlp, findAllWithBizGroupAsMap, findOperateProperties, postMarkTag } from '@/api/archives'
export default {
    data () {
        return {
            // 文本标注对象列表
            markList: [],
            // 对象分组树
            groupTree: []
        }
    },
    props: {
        rowkey: String,
        objectUri: String
    },
    created () {
        this.getObjectTree()
    },
    methods: {
    // 智能提取文档
        async  handleExtractDoc () {
            let params = {
                rowkey: this.rowkey,
                objectUri: this.objectUri
            }
            this.markList = []
            let keywordObj = await postHanlp(params)
            Object.keys(keywordObj).forEach(key => {
                keywordObj[key].forEach(markText => {
                    let obj = {
                        popoverVisible: false, // 对象树是否展示
                        isAllowed: false, // 是否使用
                        displayName: markText, // 名称
                        displayType: '组织机构名称', // 展示的类型 人名地名机构名,
                        objectUri: '', // 对象URI
                        objectName: '', // 对象名称
                        propertyList: [

                        ]
                    }
                    let displayType = {
                        agencyName: '组织机构',
                        personName: '人名',
                        placeName: '地名'
                    }
                    obj.displayType = displayType[key]
                    this.markList.push(obj)
                })
            })
        },
        async  getObjectTree () {
            let params = {
                groupList: ['socialaccount', 'keyfigures', 'focusgroup']
            }
            let data = await findAllWithBizGroupAsMap(params)
            data = data.map(item => {
                if (!item.hasOwnProperty('icon')) {
                    item.icon = '../../static/tupian.png'
                }
                return item
            })
            this.groupTree = util.parseKeyData(data)
        },
        // 对象节点点击事件
        handleNodeClick (mark, data, node) {
            if (node.level === 1) {
                return false
            }
            // {
            //                   propertyType: '', // 属性类型
            //                   propertyUri: '', // 属性uri
            //                   propertyName: '', // 属性名
            //                   value: markText// 值
            //               }
            // console.log(mRK)
            mark.objectName = data.displayname
            mark.objectUri = data.uri
            this.getRepresentativePropertyList(data.uri, mark)
            mark.popoverVisible = false
        },
        // 获取代表属性列表
        getRepresentativePropertyList (uri, mark) {
            this.representativePropertyList = []
            findOperateProperties({ uri: uri }).then(data => {
                let propertyList = data.filter(item => item.allowed === '1' && item.representative === '1')
                mark.propertyList = this.handlefilterPropertyList(propertyList, mark.displayName)
            })
        },
        // 过滤属性
        handlefilterPropertyList (propertyList, markedText) {
            return propertyList.map(element => {
                if (element.propertyType === 'GisData') {
                    element.value = { address: '', longitude: '', latitude: '' }
                } else if (element.propertyType === 'TimeInterval') {
                    element.value = { startTime: '', endTime: '' }
                } else if (element.propertyType === 'DateTime') {
                    element.value = ''
                } else {
                    element.value = markedText
                }
                return element
            })
        },
        // 开关滑动事件
        handleSwitchChange (isUsed, mark) {
            mark.isAllowed = !isUsed
            if (isUsed) {
                if (mark.objectUri === '') {
                    this.$message.error('对象类型不能为空')
                    return false
                }
                let param = {
                    docRowkey: this.rowkey,
                    objectUri: mark.objectUri,
                    propertyList: [],
                    rowkey: ''
                }
                let propertyList = mark.propertyList
                if (propertyList.length > 0) {
                    for (let i = 0; i < propertyList.length; i++) {
                        let element = propertyList[i]
                        if (element.propertyType === 'GisData') {
                            if (util.verifyValue(element.propertyType, element.value, element.displayname)) {
                                param.propertyList.push({
                                    propertyUri: element.propertyUri,
                                    propertyType: element.propertyType,
                                    address: element.value.address,
                                    longitude: element.value.longitude,
                                    latitude: element.value.latitude,
                                    label: true
                                })
                            } else {
                                return false
                            }
                        } else if (element.propertyType === 'TimeInterval') {
                            if (util.verifyValue(element.propertyType, element.value, element.displayname)) {
                                param.propertyList.push({
                                    propertyUri: element.propertyUri,
                                    propertyType: element.propertyType,
                                    timeStart: new Date(element.value.startTime).getTime(),
                                    timeEnd: new Date(element.value.endTime).getTime(),
                                    label: true
                                })
                            } else {
                                return false
                            }
                        } else {
                            if (util.verifyValue(element.propertyType, element.value, element.displayname)) {
                                let value = element.value
                                if (element.propertyType === 'DateTime') {
                                    value = new Date(element.value).getTime()
                                }
                                param.propertyList.push({
                                    propertyUri: element.propertyUri,
                                    propertyType: element.propertyType,
                                    value: value,
                                    label: true
                                })
                            } else {
                                return false
                            }
                        }
                    }
                }
                postMarkTag(param).then(response => {
                    mark.isAllowed = isUsed
                    this.$message.success('文本标记成功')
                    // this.handleCloseMarkTagDialog()
                    // this.listDocumentTagList.relations.push({ displayName: this.markedText })
                    // this.txt = this.markedTag(this.cacheTxt, this.listDocumentTagList)
                })
            }
        }
    }

}
</script>

<style lang="less" scoped>
.extraction-container {
  display: flex;
  flex-wrap: wrap;
  // justify-content: flex-start;
  margin-top: 20px;
  overflow-y: auto;
  .extraction-item {
    flex: 0 0 32%;
    border: 1px solid #cfd8dc;
    padding: 10px;
    margin-bottom: 20px;
    margin-right: 1%;
    box-sizing: border-box;
    .displayType {
      margin-top: 10px;
    }
    .object-container,
    .property-container {
      margin-top: 10px;
      min-height: 80px;
    }
  }
}
</style>
